fashion-ssr-vue3/pages/categories/[id].vue

<!-- @format -->

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useData } from './useData'
import { getParentsById } from '~/utils/object'
import { ConstKeys } from '~/enums/const-enums'

const route = useRoute()
useHead({
  title: `Wholesale ${route.query.label} for Your Store | EJET Selection`,
  meta: [
    {
      name: 'description',
      content: `Browse EJET Selection's product categories, including Home Decor, Kitchen Appliance, Beauty, and Pets. Find high-quality wholesale products to meet your retail needs.`,
    },
    {
      property: 'og:title',
      content: `Wholesale ${route.query.label} for Your Store | EJET Selection`,
    },
    {
      property: 'og:description',
      content:
         `Browse EJET Selection's product categories, including Home Decor, Kitchen Appliance, Beauty, and Pets. Find high-quality wholesale products to meet your retail needs.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: `Wholesale ${route.query.label} for Your Store | EJET Selection`,
    },
    {
      property: 'twitter:description',
      content:
        `Browse EJET Selection's product categories, including Home Decor, Kitchen Appliance, Beauty, and Pets. Find high-quality wholesale products to meet your retail needs.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/categories/${route.query.key}`,
    },
  ],
})
const {
  categories,
  goodsList,
  page_size,
  top_data,
  selectedCategory,
  currentPage,
  getCategories,
  changePage,
  form,
  total,
  handleSelectedCategory,
  handleOrderBy,
  handleSelectedFilters,
} = useData()
const crumbs = ref<any>([{ name: 'Home', url: '/' }])

const options = [{
  label: 'Sort by MOQ',
  value: 'smoq',
}, {
  label: 'Sort by Price',
  value: 'sprice',
}, {
  label: 'Sort by Date',
  value: 'sdate',
}]

watch(
  () => route.query.secondKey,
  (value: any) => {
    if (categories.value.length)
      handleSelectedCategory(value)
  },
  {
    immediate: true,
  },
)

watch(
  () => selectedCategory.value,
  async (value: any) => {
    if (value)
      handlerCrumb(value)
  },
)
function handlerCrumb(value: any) {
  const filterArr = getParentsById(categories.value, value)
  const baseCrumb = [{ name: 'Home', url: '/' }, { name: top_data.value.title, url: '' }]
  if (filterArr.length > 0) {
    const arr: any = []
    filterArr.forEach((ele: any) => {
      arr.unshift({
        name: ele.title,
        url: '',
      })
    })
    crumbs.value = [...baseCrumb, ...arr]
  }
  else {
    crumbs.value = [...baseCrumb]
  }
}

async function getAllData() {
  await getCategories()
  const route = useRoute()
  const secondLevel = route.query.secondKey
  if (secondLevel)
    handleSelectedCategory(secondLevel)
  else
    handleSelectedCategory(top_data.value.key)
  if (route.params.id && secondLevel)
    handlerCrumb(secondLevel)
  else crumbs.value.push({ name: top_data.value?.title, url: '' })
}

getAllData()
</script>

<template>
  <div class="">
    <div class="mb-42px">
      <div class="relative">
        <business-category-headerBanner :slug="route.params.id" />
      </div>
      <div class="w-1400px mx-auto pt-40px pb-20px">
        <div class="fw-300">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item
              v-for="(item, index) in crumbs" :key="index"
              :to="!!item.url ? { path: item.url } : null"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="w-1400px mx-auto mb-120px">
      <el-row class="row-bg">
        <el-col :span="5">
          <business-category-left-slider v-model:selectedValue="selectedCategory" :top-level="top_data" :list="categories" @on-select="handleSelectedCategory" />
          <div class="h-1px bg-#DCDFE6 my-40px" />
          <business-category-left-filters @on-select-filters="handleSelectedFilters" />
        </el-col>
        <el-col :span="1" />
        <el-col :span="18">
          <div class="flex justify-end mb-32px">
            <el-select v-model="form.orderby" placeholder="Select Sorting Method " :clearable="true" size="large" style="width: 240px" @change="handleOrderBy">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div v-if="goodsList.length">
            <div class="grid grid-gap-x-65px grid-gap-y-65px grid-cols-3">
              <div v-for="item in goodsList" :key="item.id">
                <common-goods-item :item="item" />
              </div>
            </div>
            <div class="mt-60px flex justify-center">
              <el-pagination
                v-model:current-page="currentPage" :page-size="page_size" :pager-count="10"
                layout="prev, pager, next" :total="total" @change="changePage"
              />
            </div>
          </div>
          <common-empty v-else class="mt-200px" title="No brand found ~" />
        </el-col>
      </el-row>
    </div>
    <business-category-swiperBrands />
    <business-category-exploreProduct />
    <AppFooter />
  </div>
</template>

<style lang="less" scoped></style>